<template>
  <div id="search">
    <my-search fixed v-model="value" cancel-text="取消" placeholder="请输入因子名称" class="search-input">
      <div class="search-cont">
        <div class="s-factor" :class="item.isSelect?'sel_bg':'org_bg'" v-for="item in searchFactors"
             @click="selectFactor(item)">
          {{item.factor_name}}
        </div>
      </div>
    </my-search>
    <div class="search-origin" v-if="!value">
      <div class="search-origin-block" v-if="factorY.length>0">
        <div class="s-title">热门因子</div>
        <div class="s-list">
          <div class="s-factor" :class="item.isSelect?'sel_bg':'org_bg'" v-for="item in factorY"
               @click="selectFactor(item)">
            {{item.factor_name}}
          </div>
        </div>
      </div>
      <div class="search-origin-block" v-if="factorX.length>0">
        <div class="s-title">最新因子</div>
        <div class="s-list">
          <div class="s-factor" :class="item.isSelect?'sel_bg':'org_bg'" v-for="item in factorX"
               @click="selectFactor(item)">
            {{item.factor_name}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import REQUEST from './../services/test'

  export default {
    name: 'search',
    data () {
      return {
        value: '',
        searchFactors: [],
        factorX: [],
        factorY: []
      }
    },
    created () {
      this.$store.dispatch('isAllFactors')
    },
    mounted () {
      this.getFactorX()
      this.getFactorY()
    },
    watch: {
      value (n, o) {
        if (n && n !== o) {
          this.getSearchList(n)
        }
      }
    },
    methods: {
      goBack: function () {
        history.back()
      },
      getSearchList (_val) {
        let _self = this
        REQUEST.searchAllFactors(_val).then(res => {
          // console.log('searchAllFactors', res)
          let _arr = []
          if (res.length > 0) {
            res.forEach(v => {
              _arr.push(v.factor_id)
            })
          }
          let _allFactors = _self.$store.state.allFactors
          let _factorId = _arr.join('|')
          _self.searchFactors = _allFactors.filter(v => {
            return _factorId.indexOf(v.factor_id) > -1
          })
          // console.log(_self.searchFactors)
        })
      },
      getFactorX () {
        let _self = this
        REQUEST.getNewFactor().then(res => {
          // console.log('重新请求--------newFactors', res)
          let _arr = []
          if (res.data.length > 0) {
            res.data.forEach(v => {
              _arr.push(v.factor_id)
            })
          }
          let _allFactors = _self.$store.state.allFactors
          let _factorId = _arr.join('|')
          _self.factorX = _allFactors.filter(v => {
            return _factorId.indexOf(v.factor_id) > -1
          })
        })
      },
      getFactorY () {
        let _self = this
        REQUEST.getHotFactor(20, 2).then(res => {
          // console.log('重新请求--------hotFactors', res)
          let _arr = []
          if (res.length > 0) {
            res.forEach(v => {
              _arr.push(v.factor_id)
            })
          }
          let _allFactors = _self.$store.state.allFactors
          let _factorId = _arr.join('|')
          _self.factorY = _allFactors.filter(v => {
            return _factorId.indexOf(v.factor_id) > -1
          })
        })
      },
      // 选中或未选中因子状态
      selectFactor: function (_item) {
        _item.isSelect = !_item.isSelect
        if (_item.isSelect) {
          this.addFactor(_item)
        } else {
          this.delFactor(_item)
        }
      },
      // 添加因子
      addFactor (_item) {
        // let _allFactors = this.$store.state.allFactors
        this.$store.commit('pushSelectFactor', _item)
        // state.allFactors.forEach(v => {
        //   if (v.factor_id === val.factor_id) {
        //     v.isSelect = val.isSelect
        //   }
        // })
        this.$router.push({name: 'factorSortsMore', query: {type: _item.factor_type}})
      },
      // 删除选中因子
      delFactor (_item) {
        this.$store.commit('removeSelectFactor', _item)
      },
    },
    computed: {
      filterItems () {
        let value = this.value
        let items = this.allFactors
        return items.filter((v) => {
          return Object.keys(v).some(function (key) {
            return String(v[key]).toLowerCase().indexOf(value) > -1
          })
        })
      },
      search () {
        let value = this.value
        let searchFactors = this.searchFactors
        this.getSearchList(value)
        return searchFactors
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  #search {
    background: #ffffff;
    .org_bg {
      border: 1px solid #f7f7f7 !important;
      color: #4f4f4f !important;
      background: #f7f7f7 !important;
    }
    .sel_bg {
      border: 1px solid #1296db !important;
      color: #1296db !important;
      background: #ffffff !important;
    }
    .search-input {
      .search-cont {
        margin-top: 1.25rem;
        .s-factor {
          width: auto;
          padding: 0.1066667rem 0.16rem;
          background: #f7f7f7;
          float: left;
          color: #4f4f4f;
          margin: 0.1066667rem 0.1066667rem;
          border-radius: 0.1066667rem;
        }
      }
    }
    .search-origin {
      position: absolute;
      top: 1.3866667rem;
      width: 100%;
      height: 100%;
      .search-origin-block {
        width: 100%;
        margin-top: 1.5rem;
        overflow: hidden;
        background: #ffffff;
        .s-title {
          width: 100%;
          text-align: center;
          font-size: 0.3733333rem;
          color: #cccccc;
        }
        .s-list {
          margin: 0.2666667rem 0.2666667rem;
          .s-factor {
            width: auto;
            padding: 0.1066667rem 0.16rem;
            background: #f7f7f7;
            float: left;
            color: #4f4f4f;
            margin: 0.1066667rem 0.1066667rem;
            border-radius: 0.1066667rem;
          }
        }
      }
    }
    .originColor {
      background: #f7f7f7 !important;
      color: #4f4f4f !important;;
    }
    .selectColor {
      background: #26a2ff !important;
      color: #ffffff !important;;
    }
  }
</style>
